import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ConfigProvider } from '@teamix/ui';
import { Layout } from '@alife/devops-ui';
import * as actions from '../actions/index';
import { pages } from './interface';
import Nav from './nav';
import utils from 'utils';

class Root extends Component {
  componentDidMount() {
    // 标记已进入组，用于window.TB_NAVIGATION.Dock.showDockGuide调用
    if (!utils.getCachedData('group_or_repo_visited')) {
      utils.setCachedData('group_or_repo_visited', true);
    }
    this.props.getGroupInfo();
  }

  componentWillUnmount() {
    // 清空数据
    this.props.resetData();
  }

  renderMain = () => {
    const { pageInfo, updating } = this.props.root;
    const { assetsName } = pageInfo;
    const LoadablePage = pages[assetsName];
    if (LoadablePage && !updating) {
      return (
        <ConfigProvider prefix="yx-">
          <Layout fullPage>
            <LoadablePage />
          </Layout>
        </ConfigProvider>
      );
    } else {
      return null;
    }
  };

  render() {
    return (
      <>
        <Nav {...this.props} />
        {this.renderMain()}
      </>
    );
  }
}

export default connect(
  (state) => state,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
